<!--
 * @Author: hifishroom
 * @Date: 2021-08-23 15:04:03
 * @LastEditTime: 2021-09-01 20:21:21
 * @FilePath: \backstage\src\components\common\swiper\DetailSlides.vue
-->
<template>
  <div>
    <swiper class="swiper-container" :options="swiperOption" ref="mySwiper">
      <swiper-slide v-for="(item, index) in itemList" :key="index">
        <div class="b"><img :src="item" alt="" class="detail-img" /></div>
      </swiper-slide>
      <div class="swiper-button-prev" slot="button-prev" @click="prev"></div>
      <!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
      <div class="swiper-button-next" slot="button-next" @click="next"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: "DetailSlides",
  props: {
    itemList: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      swiperOption: {
        watchSlidesProgress: true,
        slidesPerView: 2.9,
        centeredSlides: true,
        loop: true,
        loopedSlides: 4,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        speed: 800,
        paginationClickable: true,
        nextButton: ".swiper-button-next",
        prevButton: ".swiper-button-prev",
        on: {
          progress: function(progress) {
            for (let i = 0; i < this.slides.length; i++) {
              var slide = this.slides.eq(i);
              var slideProgress = this.slides[i].progress;
              let modify = 1;
              if (Math.abs(slideProgress) > 1) {
                modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
              }
              let translate = slideProgress * modify * 2.6 + "rem";
              let scale = 1 - Math.abs(slideProgress) / 4;
              let zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
              slide.transform(
                "translateX(" + translate + ") scale(" + scale + ")"
              );
              slide.css("zIndex", zIndex);
              slide.css("opacity", 1);
              if (Math.abs(slideProgress) > 3) {
                slide.css("opacity", 0);
              }
            }
          },
          setTransition: function(transition) {
            for (var i = 0; i < this.slides.length; i++) {
              var slide = this.slides.eq(i);
              slide.transition(transition);
            }
          }
        }
      }
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    }
  },
  methods: {
    prev() {
      this.swiper.slidePrev();
    },
    next() {
      this.swiper.slideNext();
    }
  }
};
</script>

<style lang="scss">
.b {
  width: 100%;
  height: 300px;
  background-color: antiquewhite;
}

.detail-img {
  width: 100%;
  height: 100%;
}
</style>
